<template>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 15, 20, 25]"
        :small="small" :disabled="disabled" layout="total, sizes, prev, pager, next, jumper" :total="props.talet"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
  
<script lang="ts" setup>
import { ref } from "vue";
const currentPage = ref(1)
const pageSize = ref(10)
const small = ref(false)
const disabled = ref(false)
const props = defineProps({
    talet: String
});
const handleSizeChange = (val) => {
    console.log(`${val} items per page`)
    pageSize.value = val
}
const handleCurrentChange = (val) => {
    console.log(`current page: ${val}`)
    currentPage.value = val
}

defineExpose({ currentPage, pageSize });
</script>
  
<style lang="scss" scoped></style>
  